<template>
    <div id="app">
        <el-card shadow="always">
            <el-form :inline="true" size="medium" :model="employeeSearch" class="demo-form-inline">
                <!--条件查询-->
                <el-form-item>
                    <el-input v-model="employeeSearch.ename" placeholder="员工姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="employeeSearch.addr" placeholder="员工住址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="employeeSearch.did" placeholder="所在部门">
                        <el-option label="所有部门" value="0"></el-option>
                        <el-option :label="d.dname" :value="d.did" v-for="d in deptList" :key="d.did"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" plain @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" plain @click="addEmpolyee">添加员工</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" icon="el-icon-remove" plain @click="handleDelete">批量删除员工</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="employeeList"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="工号" align="center" prop="eid" width="180"/>
                <el-table-column label="姓名" prop="ename" align="center"/>
                <el-table-column label="性别" prop="esex" align="center"/>
                <el-table-column label="年龄" prop="eage" align="center"/>
                <el-table-column label="住址" prop="addr" align="center"/>
                <el-table-column label="所在部门" prop="dname" align="center"/>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页导航面板-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20,100,200]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--对话框-->
        <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
            <el-form :model="employee">
                <el-form-item label="员工姓名" :label-width="formLabelWidth">
                    <el-input v-model="employee.ename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工性别" :label-width="formLabelWidth">
                    <el-radio v-model="employee.esex" label="男">男</el-radio>
                    <el-radio v-model="employee.esex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="员工年龄" :label-width="formLabelWidth">
                    <el-input v-model="employee.eage" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工住址" :label-width="formLabelWidth">
                    <el-input v-model="employee.addr" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在部门" :label-width="formLabelWidth" style="width: 1200px">
                    <el-select v-model="employee.did" placeholder="请选择所在部门">
                        <el-option label="所有部门" value="0"></el-option>
                        <el-option :label="d.dname" :value="d.did" v-for="d in deptList" :key="d.did"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveemployee">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import employeeApi from "@/api/employee"
    import deptApi from "@/api/dept"

    export default {
        data() {
            return {
                employeeList: [],
                deptList: [],   // 所有班级
                page: 1,        // 当前面
                pageSize: 5,    // 每页显示记录条数
                total: 100,     // 总记录数
                employeeSearch: {}, // 查询条件对象
                employee: {},
                title: '添加',
                dialogFormVisible: false,
                formLabelWidth: '100px',
                multipleSelection: [],     // 代表选中的多项
                eids: [],
            }
        },
        created() {
            this.search()
            this.findAlldept()
        },
        methods: {
            // 1. 查询所有学生
            async findemployees() {
                const {data: res} = await employeeApi.findAllEmployee()
                console.log(res)
                if (data.code === 200) {
                    this.employeeList = res.data.list
                }
            },
            // 2. 分页查询
            async findByPage() {
                const {data: res} = await employeeApi.findByPage(this.page, this.pageSize)
                console.log(res)
                if (res.code === 200) {
                    this.employeeList = res.data.pr.rows
                    this.total = res.data.pr.total
                }
            },
            // 3. 查询所有班级
            async findAlldept() {
                const {data: res} = await deptApi.findAllDept()
                console.log(res)
                if (res.code === 200) {
                    this.deptList = res.data.list
                }
            },
            // 4. 条件查询带分页
            async search() {
                const {data: res} = await employeeApi.search(this.page, this.pageSize, this.employeeSearch)
                console.log(res)
                if (res.code === 200) {
                    this.employeeList = res.data.pr.rows
                    this.total = res.data.pr.total
                }
            },
            //5.新增员工
            async saveemployee() {
                console.log("员工id: ", this.employee.eid)
                if (this.employee.eid) {
                    const res = await employeeApi.edit(this.employee)
                    if (res.data.code === 200) {
                        this.$message.success(res.data.message)
                        this.dialogFormVisible = false
                        this.employee = {}
                        await this.search()
                    } else {
                        this.$message.error(res.data.message)
                    }
                } else {
                    const res = await employeeApi.save(this.employee)
                    if (res.data.code === 200) {
                        this.$message.success(res.data.message)
                        this.dialogFormVisible = false
                        this.employee = {}
                        await this.search()
                    } else {
                        this.$message.error(res.data.message)
                    }
                }
            },
            addEmpolyee() {
                this.dialogFormVisible = true;
                this.employee = {}
                this.title = '添加员工'
            },
            // 当pagesize大小发生改变时触发
            handleSizeChange(val) {
                this.pageSize = val
                // this.findByPage()
                this.search()
                console.log(`每页 ${val} 条`);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            // 当页码page发生改变时触发
            handleCurrentChange(val) {
                this.page = val
                // this.findByPage()
                this.search()
                console.log(`当前页: ${val}`);
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.employee = row;
                this.title = '修改'
                this.dialogFormVisible = true
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.eids = [];
                if (row) {
                    this.eids.push(row.eid)
                } else {
                    this.eids = this.multipleSelection.map(m => m.eid);
                }
                console.log(this.eids)
                this.$confirm('删除', 'tips', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await employeeApi.del(this.eids)
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.employee = {}
                        await this.search()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.message
                        })
                    }
                })
            }
        }
    }
</script>

<style>

    #app {
        display: flex;
        justify-content: center;
    }

    .el-card {
        width: 90%;
    }

    .el-pagination {
        margin-top: 20px;
        text-align: right;
    }
</style>
